/**
 * Created by yanghong.liu on 2018/6/18.
 */
import React from 'react';
import {Image, StyleSheet} from 'react-native';
import {StackNavigator, TabNavigator, TabBarBottom} from 'react-navigation';
import {commonStyle} from './js/component/commonStyle'
import Home from './js/Home';
import My from './js/My'
const Tab = TabNavigator({
        Home: {
            screen: Home,
            navigationOptions: ({navigation}) => ({
                header: null,
                tabBarLabel: '首页',
                tabBarIcon: ({focused, tintColor}) => (
                    <Image
                        source={focused ? require('./imgs/tab_1_true.png') : require('./imgs/tab_1_false.png')}
                        style={[styles.icon, {resizeMode: 'contain'}]}
                    />
                )
            }),
        },
        My: {
            screen: My,
            navigationOptions: ({navigation}) => ({
                header: null,
                tabBarLabel: '我的',
                tabBarIcon: ({focused, tintColor}) => (
                    <Image
                        source={focused ? require('./imgs/tab_1_true.png') : require('./imgs/tab_1_false.png')}
                        style={[styles.icon, {resizeMode: 'contain'}]}
                    />
                )
            }),
        },
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',// 显示在底端，android 默认是显示在页面顶端的
        swipeEnabled: false,// 是否可以左右滑动切换tab
        animationEnabled: false,//切换页面时是否有动画效果
        backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
        lazy: true,
        tabBarOptions: {
            activeTintColor: commonStyle.themeColor,// 文字和图片选中颜色
            inactiveTintColor: commonStyle.black_3,
            showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
            style: {backgroundColor: 'white'},
        },
    });

const RootNavigator = StackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions: ({navigation}) => ({
            header: null,
        }),
    },
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    icon: {
        width: 25,
        height: 25
    }
});

export default RootNavigator;